<template>
    <div>
     <!-- 面包屑导航区域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>权限管理</el-breadcrumb-item>
     <el-breadcrumb-item>角色列表</el-breadcrumb-item>
 </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
    <!-- 添加角色按钮区域 -->
      <el-row>
       <el-col>
           <el-button type="primary">添加角色</el-button>
       </el-col>
      </el-row>

    <!-- 角色列表区域 -->
     <el-table :data="rolelist" border stripe>
         <!-- 展开裂 -->
        <el-table-column  type="expand">
            <template slot-scope="scope">
              <el-row :class="['bdbottom',i1 ===0 ? 'bdtop' : '','vcenter']" v-for="(iteml,i1) in scope.row.children" :key="iteml.id">
                  <!-- 渲染一级权限 -->
                  <el-col :span="5">
                    <el-tag
                    closable
                    @close="removeRightById(scope.row,iteml.id)"
                    >{{iteml.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>  
                  </el-col>
                  <!-- 渲染二级和三级 -->
                  <el-col :span="19">
                     <!-- 通过for循环 嵌套渲染二级权限 -->
                     <el-row :class="[i2===0 ? '': 'bdtop','vcenter']" v-for="(iteml2,i2) in iteml.children" :key="iteml2.id">
                      <!-- 二级目录 -->
                      <el-col :span="6">
                          <el-tag type="success"
                          closable
                          @close="removeRightById(scope.row,iteml2.id)"
                          >{{iteml2.authName}}</el-tag>
                          <i class="el-icon-caret-right"></i>  
                      </el-col>
                       <!-- 三级目录 -->
                        <el-col :span="13">
                          <el-tag type="warning" v-for="(iteml3) in iteml2.children" :key="iteml3.id" closable
                          @close="removeRightById(scope.row,iteml3.id)" 
                          >{{iteml3.authName}}</el-tag>
                        </el-col>
                     </el-row>
                  </el-col>
              </el-row>
            </template>
        </el-table-column>
         <!-- 索引列 -->
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeRoleById(scope.row.id)">删除</el-button>
              <el-button size="mini" type="warning" icon="el-icon-setting" @click="showSetRightDialog(scope.row)">分配权限</el-button>
             </template> 
        </el-table-column>
     </el-table>
    </el-card>

    <!-- 编辑角色对话框 -->
    <el-dialog
    title="提示"
    :visible.sync="editDialogVisible"
     width="30%"
    >
      <!-- 内容主体区域 -->
      <el-form ref="editFormRoule" :model="editForm" label-width="70px" >
         <el-form-item label="角色名称">
          <el-input v-model="editForm.roleName" disabled></el-input>
         </el-form-item> 
        <el-form-item label="角色描述" >
          <el-input v-model="editForm.roleDesc" ></el-input>
        </el-form-item> 
      </el-form>
         <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo">确 定</el-button>
         </span>
   </el-dialog>

     <!-- 分配权限的对话框 -->
      <el-dialog
    title="提示"
    :visible.sync="setRightDialogVisible"
     width="30%"
     @close="setRightDialogClosed"
    >
      <!-- 内容主体区域(树形控件) -->
      <el-tree ref="treeRef" :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defkeys" @click="allotRights"></el-tree>
         <span slot="footer" class="dialog-footer">
          <el-button @click="setRightDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="allotRights">确 定</el-button>
         </span>
   </el-dialog>

    </div>
</template>

<script>
export default{
    data(){
        return{
            //所有角色列表数据
            rolelist:[],
        //查询用户的数据
        editForm:{},
        //修改用户的显示与隐藏
        editDialogVisible:false,
        //分配角色的显示与隐藏
        setRightDialogVisible:false,
        //所有权限列表数据
        rightslist:[],
        //树形控件的属性绑定对象
        treeProps:{
            label:"authName",
            children:"children"
        },
        //默认选中的节点Id数组
        defkeys:[],
        //即将分配角色的id
        roleId:""
        }
    },
    //钩子函数
    created(){
        this.getRolesList()
    },
    methods:{
        //获取所有角色的列表
      async getRolesList()
        {
          const{data:res} = await this.$http.get('/server/sp-role/roles')
              if(res.meta.status!==201)
              {
                  return this.$message.error("获取角色列表失败!")
              }
              this.rolelist = res.data;
              console.log(res)
        },
        //按钮编辑角色功能
       async showEditDialog(id)
        {
          const {data:res} = await this.$http.get("/server/sp-role/roles/"+id)
          if(res.meta.status!==200)
          {
              return this.$message.error("查询用户失败!")
          }
          this.editForm = res.data
          this.editDialogVisible = true
        },
        //编辑用户信息提交
       async editUserInfo(){
          //发送编辑用户请求
        const {data:res} = await this.$http.put("/server/sp-role/roles/"+this.editForm.roleId,{
            roleName:this.editForm.roleName,
            roleDesc:this.editForm.roleDesc
        })
        console.log(res)
          if(res.meta.status!==200)
          {
           return this.$message.error("更新角色信息失败！")
          } 
           //关闭对话框
         this.editDialogVisible = false
         //刷新数据列表
         this.getRolesList()
         //提示修改成功
         this.$message.success("更新成功！");
       },
       //根据ID删除对应的用户
      async removeRoleById(id)
       {
       //  弹窗询问用户是否删除数据
       const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
         
           //如果用户确认返回字符串confirm
      //如果用户取消删除返回字符串cancel
       if(confirmResult!=="confirm")
       {
          return this.$message.info("已经取消删除")
       }
         //发送删除请求
         const {data:res} = await this.$http.delete("/server/sp-role/roles/"+id) 
              if(res.meta.status!==200)
              {
                return this.$message.error("删除用户失败!")
              }
            this.$message.success("删除用户成功!")
            this.getRolesList()
       },
       //根据id删除对应的权限
      async removeRightById(role,rightId){
            //  弹窗询问用户是否删除数据
       const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)

        //如果用户取消删除返回字符串cancel
       if(confirmResult!=="confirm")
       {
          return this.$message.info("已经取消删除")
       }
         //发送删除请求
        const {data:res} =await this.$http.delete(`/server/sp-role/roles/${role.id}/rights/${rightId}`) 
         if(res.meta.status!==200)
         {
             return this.$$message.error("删除权限失败")
         }
         role.children = res.data
       },
       //分配角色按钮
      async showSetRightDialog(roles)
       {
           //保存用户的id
           this.roleId = roles.id
         //获取所有的数据
           const {data: res} = await this.$http.get("/server/sp-role/rights/tree")

           if(res.meta.status!==200)
           {
               return this.$message.error("获取角色权限列表失败")
           }

           this.rightslist = res.data
           this.getLeafKeys(roles,this.defkeys)
           console.log(roles)
           this.setRightDialogVisible=true
       },
       //通过递归的形式，获取角色下所有的三级权限的id，并保存到数组中
       getLeafKeys(node,arr)
       {
          //如果当前node节点不包含children属性，是三级节点
          if(!node.children)
          {
              return arr.push(node.id)
          }
          node.children.forEach(item=>{
              this.getLeafKeys(item,arr)
          })
       },
       //监听分配权限对话框的关闭事件
       setRightDialogClosed()
       {
           this.defkeys = []
       },
       //点击角色分配权限
      async allotRights()
       {
           const keys =[
               this.$refs.treeRef.getCheckedKeys(),
               this.$refs.treeRef.getCheckedKeys()
           ]
           const idStr = keys.join(",");
          const {data:res} = await this.$http.post(`/server/sp-role/roles/${this,this.roleId}/rights`,{
               rids:idStr
           })
           if(res.meta.status!==200)
           {
               return this.$message.error("分配权限失败")
           }
           this.$message.success("分配权限成功!")
           this.getRolesList()
           this.setRightDialogVisible=false
       }
    }
}
</script>

<style lang="less" scoped>
.el-tag{
    margin: 7px;
}
.bdtop{
    border-top:1px solid #eee
}
.bdbottom{
    border-bottom: 1px solid #eee;
}
.vcenter{
    display: flex;
    align-items: center;
}
</style>
